<template>
  <!-- 用户抗位置泄露-大屏 -->
  <el-container ref="bigModel" class="main-model">
    <el-header>
      <Header :active-title="6" />
      <!-- 摄像头Div -->
      <div style="width: 500px; height: 500px">
        <!-- 上部分三个Div -->
        <div
          style="display: flex; justify-content: space-between; padding: 10px"
        >
          <div
            style="
              width: 150px;
              height: 80px;
              background-color: #1f4f86b5;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            "
          >
            <div style="font-size: 16px; font-weight: bold; color: #fff">
              摄像头总数:
            </div>
            <div style="font-size: 14px; font-weight: bold; color: #fff">
              56564个
            </div>
          </div>
          <div
            style="
              width: 150px;
              height: 80px;
              background-color: #1f4f86b5;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            "
          >
            <div style="font-size: 16px; font-weight: bold; color: #fff">
              可控摄像头总数:
            </div>
            <div style="font-size: 14px; font-weight: bold; color: #fff">
              56564个
            </div>
          </div>
          <div
            style="
              width: 150px;
              height: 80px;
              background-color: #1f4f86b5;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            "
          >
            <div style="font-size: 16px; font-weight: bold; color: #fff">
              品牌型号总数:
            </div>
            <div style="font-size: 14px; font-weight: bold; color: #fff">
              56564个
            </div>
          </div>
        </div>
        <!-- 下部分echarts统计图 -->
        <div
          style="
            width: 100%;
            height: 300px;
            background-color: #1f4f86b5;
            padding: 10px;
            padding-left: 20px;
          "
        >
          <camera-echarts></camera-echarts>
        </div>
      </div>
    </el-header>
    <el-main>
      <div class="home-model">
        <el-row style="height: 100%">
          <el-col :span="24" style="height: 100%">
            <div class="home-model-left">
              <div style="height: 100%; width: 100%">
                <SliteMapMarkInfo ref="mapmarkInfoRef"></SliteMapMarkInfo>
              </div>
            </div>
          </el-col>
        </el-row>
        <div
          class="rightModel"
          :style="{ width: rightModelShow ? '20%' : '1px' }"
        >
          <img
            v-if="rightModelShow"
            :src="require('@/assets/xd/new/Group 1142813242.png')"
            alt=""
            class="rightJ"
            style=""
            @click="hideRightModel"
          />
          <img
            v-else
            :src="require('@/assets/xd/new/Group 1142813263.png')"
            alt=""
            class="rightJ"
            style=""
            @click="showRightModel"
          />
          <div v-show="rightModelShow" class="home-model-right">
            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                <div style="margin-top: 1px">摄像头品牌统计</div>
                <!-- 跳转终端页面 -->
                <el-button
                  type="text"
                  @click="toterminalManagement"
                  class="more"
                >
                  更多
                </el-button>
              </div>
              <div class="infoBody">
                <appInstalled />
              </div>
            </div>

            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                <div style="margin-top: 1px">风险告警</div>
                <!-- 跳转apk页面 -->
                <el-button type="text" @click="showapk" class="more">
                  更多
                </el-button>
              </div>
              <div class="infoBody">
                <!-- <appAnalyze/> -->
                <alarm />
              </div>
            </div>
            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                <div style="margin-top: 1px">风险统计</div>
                <!-- 跳转数据分析页面 -->
                <el-button type="text" @click="showdata" class="more">
                  更多
                </el-button>
              </div>
              <div class="infoBody">
                <taskStatistics />
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import terminalQuantity from "./components/terminalQuantity/index.vue";
import appInstalled from "./components/appInstalled/index.vue";
import taskStatistics from "./components/taskStatistics/index.vue";
import Header from "@/views/largeScreen/components/header/index.vue";
import deviceOwnership from "@/views/largeScreen/components/deviceOwnership/index.vue";
import ListScroll from "@/components/DtSrcollCopy2";
import bkMap from "@/views/largeScreen/components/bkMap/index.vue";
import SliteMapMarkInfo from "@/components/maps/SliteMapMarkInfo.vue";
import MapMarkInfo from "@/components/maps/MapMarkInfo.vue";
import * as olProj from "ol/proj";
import cameraEcharts from "./cameraEcharts.vue";
import appAnalyze from "./components/index.vue";
import alarm from "./components/alarm.vue";
import { listInfo } from "@/api/system/info";

export default {
  components: {
    alarm,
    terminalQuantity,
    appInstalled,
    taskStatistics,
    Header,
    deviceOwnership,
    ListScroll,
    bkMap,
    SliteMapMarkInfo,
    MapMarkInfo,
    cameraEcharts,
    appAnalyze,
  },
  data() {
    return {
      rightModelShow: true,
      rightModelSpan: 7,
      leftModelSpan: 17,
      pointsList: [],
      trajectoryPoints: [],
      infoHeight: 300,
      infoList: [],
    };
  },

  mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    this.initFn();
  },

  methods: {
    //初始化 通过接口获取经纬度信息展示到地图上
    initFn() {
      listInfo({ pageNum: 1, pageSize: 10000 }).then((response) => {
        this.infoList = response.rows;
        let rtanList = this.TransformFn(response.rows);
        this.trajectoryPoints = rtanList;
        this.pointsList = this.trajectoryPoints.map((item, index) => {
          let point = {
            ip: item.cameraIp,
            lng: item.cameraLon,
            lat: item.cameraLat,
            displayLevel: "城市级",
            viewLng: item.cameraLon,
            viewLat:item.cameraLat,
            name: "marks",
            oldLon: item.oldLon,
            oldLat: item.oldLat,
            status: 1,
            id: item.id,
            cameraBrand: item.cameraBrand,
            cameraViewurl: item.cameraViewurl,
          };
          return point;
        });
        this.$nextTick(() => {
          this.$refs.mapmarkInfoRef.setData({
            points: this.pointsList,
            route: "address",
            displayLevel: "城市级",
            showPointInfo: false,
            showPointInfoTips: false,
          });
        });
      });
    },
    TransformFn(ipList) {
      for (let i = 0; i < ipList.length; i++) {
        ipList[i].oldLon = ipList[i].cameraLon;
        ipList[i].oldLat = ipList[i].cameraLat;
        let center = olProj.transform(
          [ipList[i].cameraLon, ipList[i].cameraLat],
          "EPSG:4326",
          "EPSG:3857"
        );
        ipList[i].cameraLon = center[0];
        ipList[i].cameraLat = center[1];

      }
      return ipList;
    },
    toterminalManagement() {
      this.$router.push("/xsystem/terminalManagement");
    },
    showapk() {
      this.$router.push("/xsystem/apk");
    },
    showdata() {
      this.$router.push("/xsystem/data");
    },
    hideRightModel() {
      this.rightModelShow = false;
      this.rightModelSpan = 0;
      this.leftModelSpan = 24;
    },
    showRightModel() {
      this.rightModelShow = true;
      this.rightModelSpan = 7;
      this.leftModelSpan = 17;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-header {
  padding: 0;
  z-index: 5;
}

.mapModel {
  width: 100%;
  height: 100%;
}

.home-model-right {
  border-radius: 5px;
  padding: 5px;
}

.home-model-left {
  position: relative;
  height: 100%;
}

.home-model {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-model-search {
  z-index: 100000;
}

.home-model-right {
  .infoModel {
    position: relative;

    .infoTitle {
      font-size: vh(20);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-image: url(~@/assets/xd/new/title.png);
      background-repeat: no-repeat;
      background-size: 100% 80%;
      color: #fff;
    }

    .infoBody {
      height: 100%;
      padding-top: 40px;
      box-sizing: border-box;
    }
  }
}

.rightModel {
  position: absolute;
  right: 0;
  top: 10px;
  width: vw(380);
  height: vh(960);
}

.rightJ {
  left: -40px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.btn {
  position: absolute;
  right: 20%;
  z-index: 999;
  font-size: 20px;
}

.main-model {
  background-image: url(~@/assets/xd/new/homebg.png);
  background-color: #094294;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.more {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
</style>
